<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :isFixed="scrollTop >= 0" :currentTab="currentTab" selectedColor="#007aff" sliderBgColor="#007aff"
		 @change="change" itemWidth="33.3333%"></tui-tabs>
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{ 'tui-item-list': scrollTop >= 0 }">
			<view class="tui-item-item" v-for="(task, Index) in taskList" :key="Index">
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-list-title">
						<view>申请名称：{{ task.applyName }}</view>
						<tui-tag :type="applyStatusColorFormat(task.applyStatus)" plain>{{applyStatusFormat(task.applyStatus)}}</tui-tag>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>申请工作地址：{{ task.address }}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view style="width: 120rpx">执行人：</view>
						<view class="tui-flex-box" v-if="task.excutePersonName">
							<tui-tag margin="0 10rpx 10rpx 0" type="green" plain v-for="(person, personIndex) in task.excutePersonName.split( ',' )"
							 :key="personIndex">{{ person }}</tui-tag>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>有效时间：</view>
						<view class="tui-text-gray">{{ task.effectStart }} ~ {{ task.effectEnd }}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>申请人：</view>
						<view class="tui-text-gray">陈嘉桦</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>联系电话：</view>
						<view class="tui-text-gray">18547774451</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-list-item">
						<view>申请原因：</view>
						<view class="tui-text-gray">{{ task.reason }}</view>
					</view>
				</tui-list-cell>
				<view class="tui-operation-btn" v-if="task.applyStatus==1">
					<view class="tui-btn-ml">
						<tui-button type="green" plain width="200rpx" height="56rpx" :size="26" shape="circle" @click="examineTask(task,2)">通过</tui-button>
					</view>
					<view class="tui-btn-ml">
						<tui-button type="danger" plain width="200rpx" height="56rpx" :size="26" shape="circle" @click="examineTask(task,3)">拒绝</tui-button>
					</view>
				</view>
				
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="noMore" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyStatusDict: [{
					dictValue: 1,
					dictLabel: '已提交',
					color: 'primary'
				}, {
					dictValue: 2,
					dictLabel: '审核通过',
					color: 'green'
				}, {
					dictValue: 3,
					dictLabel: '拒绝',
					color: 'danger'
				}],
				tabs: [{
						name: "全部",
					},
					{
						name: "已提交",
					},
					{
						name: "审核通过",
					},
					{
						name: "拒绝",
					},
				],
				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				scrollTop: 0,
				taskList: [],
				total: 5,
				pageNum: 1,
			};
		},
		computed: {
			noMore() {
				return this.taskList.length >= this.total;
			},
			disabled() {
				return this.loadding || this.noMore;
			},
			applyStatus() {
				return this.currentTab;
			},
		},
		onShow() {
			this.getList();
		},
		methods: {
			applyStatusFormat(applyStatus) {
				return this.applyStatusDict.find(v => v.dictValue == applyStatus).dictLabel
			},
			applyStatusColorFormat(applyStatus) {
				return this.applyStatusDict.find(v => v.dictValue == applyStatus).color
			},
			getList() {
				this.loadding = true;
				this.tui.request(
						"/api/apply/excute/list",
						"GET", {
							pageSize: 5,
							pageNum: this.pageNum,
							applyStatus: this.applyStatus,
						},
						false,
						false,
						false
					)
					.then((res) => {
						res.rows.map((v) => {
							this.taskList.push(v);
						});
						this.total = res.total;
						this.loadding = false;
						this.pageNum = this.pageNum + 1;
					});
			},
			change(e) {
				this.currentTab = e.index;
				this.total = 20;
				this.taskList = [];
				this.pageNum = 1;
				this.getList();
			},
			examineTask(task,applyStatus) {
				let self=this;
				uni.showModal({
				    title: '提示',
				    content: '确认'+(applyStatus==2?'通过':'拒绝')+'此临时任务申请',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							self.doExamine({applyId:task.applyId,applyStatus:applyStatus})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			doExamine(params) {
				this.tui.request("/api/apply/excute/approval", "POST", params, false, false, true).then(res => {
					this.total = 20;
					this.taskList = [];
					this.pageNum = 1;
					this.getList();	
				})
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
		},
		onReachBottom() {
			//只是测试效果，逻辑以实际数据为准
			if (!this.disabled) {
				this.getList();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
	};
</script>

<style>
	.container {
		/* padding-bottom: env(safe-area-inset-bottom); */
		padding-bottom: 100rpx;
	}

	.tui-item-list {
		margin-top: 80rpx;
	}

	.tui-item-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-list-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-list-item {
		width: 100%;
		font-size: 28rpx;
		display: flex;
	}

	.tui-text-gray {
		color: #888;
		font-size: 26rpx;
	}

	.tui-flex-box {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 26rpx;
	}

	.tui-operation-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 10rpx 30rpx 20rpx;
		box-sizing: border-box;
	}
	
	.tui-btn-ml {
		margin-left: 20rpx;
	}
	
</style>
